<template>
  <page-header-wrapper>
    <Promised :promise="getGroupAsync">
      <template v-slot:pending>
        <Skeleton
          :rows="8"
        />
      </template>
      <template v-slot="group">
        <section>
          <a-card :bordered="false">
            <Actions :group="group" class="actions-container" />

            <BasicForm :group="group" />

            <a-divider />

            <PositionForm :group="group" />

            <a-divider />
            <Roles :group="group" :show-checkbox="false" />
          </a-card>
        </section>
      </template>
    </Promised>
  </page-header-wrapper>
</template>

<script>
import { getGroup } from '@/api/flow/group'
import Actions from './Actions.vue'
import BasicForm from './Basic.vue'
import PositionForm from './Position.vue'
import Roles from '../modify/Roles'

export default {
  data () {
    return {
      getGroupAsync: null,
    }
  },

  components: {
    Actions,
    BasicForm,
    PositionForm,
    Roles,
  },

  computed: {
    gid () {
      return this.$route.params.gid
    },
  },

  created () {
    this.getGroupAsync = this.getGroup()
  },

  methods: {
    getGroup () {
      return new Promise((resolve, reject) => {
        getGroup(this.gid)
          .then(data => {
            resolve(data)
          })
          .catch(error => {
            resolve(error)
          })
      })
    },
  },
}

</script>

<style lang="scss" scoped>
.actions-container {
  margin-bottom: $margin-md;
}
</style>
